<template>
  <div class="dbheader">
    <!-- logo设计部分 -->
    <div class="logo_warp">
      <img
        class="logo_img"
        src="../../assets/wqj.png"
        alt="飞浆3D医疗数据一体化平台"
      />
      <span>基于百度飞浆的医疗数据智能解析平台</span>
    </div>
    <!-- 右侧的四个部分 -->
    <light-dark></light-dark>
    <el-row class="el-r">
      <!-- <el-col :span="3"> -->
        <!-- <el-autocomplete
        v-model="state1"
        :fetch-suggestions="querySearch"
        class="inline-input"
        placeholder="Please Input"
        @select="handleSelect"
        />-->
        <!-- <el-autocomplete class="inline-input" placeholder="搜索" /> -->
      <!-- </el-col> -->
      <!--      <el-col :span="3" class="signed_img_w tada">-->
      <!--        <img src="static/image/icon/wenhao.png" />-->
      <!--        <span>帮助</span>-->
      <!--      </el-col>-->

      <el-col :span="3" class="signed_img_w tada">
        <label style="cursor: pointer" @click="showHelpDialog = true">
          <img src="static/image/icon/wenhao.png" />
          <span>帮助</span>
        </label>
      </el-col>

      <el-dialog
        title="帮助"
        :visible.sync="showHelpDialog"
        width="90%"
        custom-class="help-dialog"
      >
        <help-content></help-content>
      </el-dialog>

      <el-col :span="3" class="signed_img_w tada left-border">
        <label style="cursor: pointer" @click="showMessageDialog = true">
          <img src="static/image/icon/remind.png" />
          <span>消息</span>
          <span class="badge" v-if="isOpen">1</span>
        </label>
      </el-col>
      <!-- 默认作者头像 -->
      <el-col
        :span="3"
        class="signed_img_w left-border"
        style="cursor: pointer"
      >
        <img src="static/image/page/default.png" />
        <span>Admin</span>
      </el-col>
    </el-row>
    <el-row class="menu_r">
      <el-dropdown>
        <div class="menu_l">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1024 1024"
            data-v-152cbb9b
          >
            <path
              fill="currentColor"
              d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0   1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"
            />
          </svg>
        </div>
        <template #dropdown>
          <el-dropdown-menu trigger="click">
            <el-dropdown-item
              v-for="item in menuList"
              :key="item.id"
              @click="clickMenu(item.path)"
              >{{ item.authname }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-row>

    <!-- 消息提示对话框 -->
    <el-dialog
      title="消息提示"
      :visible.sync="showMessageDialog"
      custom-class="message-dialog"
    >
      <p>欢迎使用基于百度飞浆的医疗数据智能解析平台！！</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onChange"
          >知道了</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { menuList } from "../../utils/menuList";
import LightDark from "./components/LightDark.vue";
import HelpContent from "../../pages/Config.vue";

export default {
  name: "DbHeader",
  components: {
    LightDark,
    HelpContent
  },
  data() {
    return {
      menuList,
      showHelpDialog: false,
      isOpen: false,
      showMessageDialog: false
    };
  },
  mounted() {
    const isOpened = localStorage.getItem("isOpen");
    if(!isOpened){
      this.isOpen = true;
    }
  },
  methods: {
    clickMenu: function(path) {
      this.$router.push("/" + path);
    },
    onChange:function() {
      const isOpened = localStorage.getItem("isOpen");
      if (!isOpened) {
        localStorage.setItem("isOpen", true);
        this.isOpen=false
      }
      this.showMessageDialog = false
    }
  }
};
</script>

<style lang="less" scoped>
.left-border {
  border-left: 1px solid rgb(241, 241, 241);
}
.signed_img_w {
  text-align: center;
  img {
    width: 30px;
    margin-right: 5px;
    vertical-align: middle;
  }
  span {
    color: var(--fontColor);
    font-weight: 550;
    vertical-align: middle;
  }
  .badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    margin-left: 5px;
    vertical-align: middle;
  }
}
.dbheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.logo_warp {
  width: 780px;
  cursor: pointer;
  height: 100%;

  .logo_img {
    width: 165px;
    vertical-align: middle;
    margin-right: 5px;
    height: 100%;
  }
  span {
    color: var(--fontColor);
    font-weight: 550;
    vertical-align: middle;
  }
}
.el-r {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  @media only screen and(max-width:800px) {
    display: none;
  }
}
.menu_r {
  display: none;
  @media only screen and(max-width:800px) {
    display: block;
  }
  .menu_l {
    width: 37px;
    color: rgba(#2a61ff, 0.5);
  }
}

.tada {
  &:hover {
    img {
      animation: tada 0.4s linear infinite;
    }
  }
}

.help-dialog {
  /* 在这里可以设置对话框的宽度和其他样式 */
  width: 90% !important;
  .el-dialog__title{
    padding: 20px 32px 10px;
  }
}
.message-dialog {
  /* 在这里可以设置对话框的宽度和其他样式 */
  width: 400px !important;
}
</style>
